<template>
<div>
    <a-dropdown :trigger="['click']">
        <div class="filter-axis" @mouseenter="deleteStyle = 'opacity: 1'" @mouseleave="deleteStyle = 'opacity: 0'">
            <i class="el-icon-arrow-down"></i>
            <span>{{ axis.alia }}</span>
            <span>{{ condition.filter }}</span>
            <span>{{ condition.value }}</span>
            <i class="el-icon-error" :style="deleteStyle" @click="handleDelete"></i>
        </div>
        <a-menu slot="overlay" @click="handleMenuClick" style="width: 150px">
            <a-menu-item key="update">修改筛选条件</a-menu-item>
            <a-menu-item key="delete">删除筛选条件</a-menu-item>
        </a-menu>
    </a-dropdown>

    <filter-modal v-if="filterModalVisible"
        :field="axis.alia"
        :dataType="axis.dataType"
        :dateRange="axis.dateRange"
        :filterType="axis.filterType"
        :values="axis.values"
        :visible="filterModalVisible"
        @close="filterModalVisible = false"
        @save="filterSave"
    />
</div>
</template>

<script>
import { DataType, FilterType, DateRange } from '@/filterConstant';
import FilterModal from "./modal/filterModal.vue"
export default {
    props:{
        axis: Object
    },
    components:{
        FilterModal
    },
    computed:{
        condition(){
            const {dataType, filterType, values, dateRange} = this.axis
            let condition = {
                filter: '',
                value: ''
            }
            if(!values || !dateRange) return condition
            if(dataType === DataType.TEXT){
                condition.filter = this.textOption.find(d => d.value === filterType).alia
                condition.value = values.join("，")
            } else if (dataType === DataType.NUMBER) {
                condition.filter = this.numberOption.find(d => d.value === filterType).alia
                condition.value = values.join("，")
            } else if (dataType === DataType.DATE) {
                condition.filter = this.dateOption.find(d => d.value === filterType).alia
                condition.value = this.dateDetailOption.find(d => d.value === dateRange).alia
            }
            return condition
        }
    },
    data(){
        return {
            deleteStyle: "opacity: 0",
            filterModalVisible: false,
            textOption: [
                { value: FilterType.INCLUDE, alia: '包含' },
                { value: FilterType.EQUAL, alia: '是' },
                { value: FilterType.BEGAIN, alia: '开头为' },
                { value: FilterType.END, alia: '结尾为' },
                { value: FilterType.EXCLUSIVE, alia: '不包含' },
                { value: FilterType.UNEQUAL, alia: '不是' }
            ],
            numberOption: [
                { value: FilterType.EQUAL, alia: '=' },
                { value: FilterType.UNEQUAL, alia: '≠' },
                { value: FilterType.GREATER, alia: '>' },
                { value: FilterType.GREATER_EQUAL, alia: '>=' },
                { value: FilterType.LESS, alia: '<' },
                { value: FilterType.LESS_EQUAL, alia: '<=' }
            ],
            dateOption: [
                { value: FilterType.DATE_YES, alia: '日期是' },
                { value: FilterType.DATE_NO, alia: '日期不是' }
            ],
            dateDetailOption: [
                { value: DateRange.TODAY, alia: '今天' },
                { value: DateRange.YESTERDAY, alia: '昨天' },
                { value: DateRange.TOMORROW, alia: '明天' },
                { value: DateRange.THIS_WEEK, alia: '本周' },
                { value: DateRange.LAST_WEEK, alia: '上周' },
                { value: DateRange.NEXT_WEEK, alia: '下周' },
                { value: DateRange.THIS_MONTH, alia: '本月' },
                { value: DateRange.LAST_MONTH, alia: '上月' },
                { value: DateRange.NEXT_MONTH, alia: '下月' },
                // { value: DateRange.PAST_SEVERAL_DAYS, alia: '过去...天' },
                // { value: DateRange.FEATURE_SEVERAL_DAYS, alia: '将来...天' }
            ],
        }
    },
    methods:{
        handleDelete(){
            this.$emit('deleteDrag', this.axis.uuid, 'filters')
        },
        handleMenuClick(e){
            const {key} = e
            if(key === 'update') {
                this.filterModalVisible = true
            } else if (key === 'delete') {
                this.handleDelete()
            }
        },
        filterSave(data){            
            this.$emit('change', this.axis.uuid, 'filters', {
                filterType: data.filterType,
                values: data.values,
                dateRange: data.dateRange
            })
            this.filterModalVisible = false
        }
    },

};
</script>

<style lang="less">
    .filter-axis{
        color: #5E6D82;
        background: #EAF0FC;
        padding: 0 10px;
        margin: 2px;
        height: 28px;
        line-height: 28px;
        border-radius: 14px;
        cursor: pointer;

        span{
            margin: 0 5px;
        }
    }

    .axis-dialog{
        position: absolute;
        background-color: #fff;
        z-index: 1;
        padding: 10px;
        width: 220px;
        height: 100px;
        border-radius: 2px;
        box-shadow: 0 0 6px rgb(51 51 51 / 20%);

        input{
            color: black !important;
            border-color: #e0e0e0 !important;
            font-weight: 400;
            border-radius: 2px;
        }

        .buttoms{
            display: flex;
            justify-content: space-between;
            margin-top: 10px;

            button{
                width: 90px;
            }
        }
    }
</style>